<template>
	<div class="extractHistory">
		<!-- <HeaderTop :title="`提现记录`" :hasright='true' :rightText='chosedDate'></HeaderTop> -->
        <div class="history-title">
            <img src="../../../static/images/agent-back-icon.png" alt="" class="left-icon" @click="$router.back()">
            <div class="title-fonts">提现记录</div>
            <div class="right-blank"></div>
            <div class="right-fonts" @click="dateSelect = true">{{chosedDate}}</div>
        </div>
		<div class="extract-content-title">
			<div class="extract-content-title-list" :class="chosingTitle===1?'title-chosing':''" @click="switchTitle(1)">取款记录</div>
			<div class="extract-content-title-list" :class="chosingTitle===2?'title-chosing':''" @click="switchTitle(2)">虚拟币取款记录</div>
			<div class="extract-content-title-list" :class="chosingTitle===3?'title-chosing':''" @click="switchTitle(3)">佣金取款记录</div>
		</div>
		<div class="gray-line"></div>
		<div class="lowerLevel-content-show">
			<div class="lowerLevel-content-show-title">
				<div class="w28-title" v-if="chosingTitle===3">订单时间</div>
				<div :class="chosingTitle===3?'w44-title':''">订单号</div>
				<div :class="chosingTitle===3?'w28-title':''">取款金额</div>
			</div>
			<div class="lowerLevel-content-show-content" v-if="chosingTitle === 1">
				<div class="lowerLevel-content-show-content-list" @click="toWithdrawDetail(index)" v-for="(item,index) in bankHistory" :key="index">
					<div class="">{{item.orderId}}</div>
					<div class="">{{item.cash}}</div>
					<img src="../../../static/images/agent-lowerLevel-arrow.png" alt="" class="lowerLevel-content-show-content-icon">
				</div>
                <div class="load-more" v-if='canLoad' @click="loadMoreBank">
                    <div class="load-more-fonts" style='color:#00479d;'>点击加载更多</div>
                    <van-icon name="arrow-down" color="#00479d"/>
                </div>
                <div class="load-more" v-if='loadAll'>
                    <div class="load-more-fonts">已加载全部</div>
                </div>
			</div>
			<div class="lowerLevel-content-show-content" v-if="chosingTitle === 2">
				<div class="lowerLevel-content-show-content-list" @click="toWithdrawDetail(index)" v-for="(item,index) in virtualHistory" :key="index">
					<div class="">{{item.orderId}}</div>
					<div class="">{{item.cash}}</div>
					<img src="../../../static/images/agent-lowerLevel-arrow.png" alt="" class="lowerLevel-content-show-content-icon">
				</div>
                <div class="load-more" v-if='canLoad2' @click="loadMoreVirtual">
                    <div class="load-more-fonts" style='color:#00479d;'>点击加载更多</div>
                    <van-icon name="arrow-down" color="#00479d"/>
                </div>
                <div class="load-more" v-if='loadAll2'>
                    <div class="load-more-fonts">已加载全部</div>
                </div>
			</div>
			<div class="lowerLevel-content-show-content" v-if="chosingTitle === 3">
				<div class="lowerLevel-content-show-content-list" v-for="(item,index) in commissionHistory" :key="index">
					<div class="w28">{{item.addTimeShow}}</div>
					<div class="w44">{{item.orderId}}</div>
					<div class="w28">{{item.cash}}</div>
				</div>
                <div class="load-more" v-if='canLoad3' @click="loadMoreCommission">
                    <div class="load-more-fonts" style='color:#00479d;'>点击加载更多</div>
                    <van-icon name="arrow-down" color="#00479d"/>
                </div>
                <div class="load-more" v-if='loadAll3'>
                    <div class="load-more-fonts">已加载全部</div>
                </div>
			</div>
            <div class="noData-box" v-if='noData'>
                <img src="../../../static/images/agent-reports-noData.png" alt="" class="no-data-img">
                <div class="no-data-fonts">暂无数据</div>
            </div>
		</div>
		<van-loading id='pageLoading' v-if='isLoading' type="spinner" size="40" color="#1989fa"/>
		<van-calendar v-model="dateSelect" :max-range="30" :min-date="new Date(dateRange.getFullYear(),dateRange.getMonth()-1,1)" :max-date="new Date(dateRange.getFullYear(),dateRange.getMonth(),dateRange.getDate())" type="range" @confirm="onConfirmDate" color="#00459E" title="请选择日期范围"/>
		
	
	
	</div>
</template>
<script>
import {Dialog, Toast} from "vant";
import HeaderTop from '../../components/top/top';
import $ from 'jquery'
export default {
	name: 'extractHistory',
	components: {
		HeaderTop,
        $,
	},
	data() {
		return {
			chosingTitle:0,
			bankHistory:[],
			virtualHistory:[],
			commissionHistory:[],
			pageNumber:1,
            pageSize:10,
            isLoading:false,
            dateSelect:false,
            dateRange:new Date(),
            chosedDate:'自定义查询',
            beginTime:'',
			endTime:'',
            noData:false,
            loadAll:false,
            loadAll2:false,
            loadAll3:false,
            canLoad:false,
            canLoad2:false,
            canLoad3:false,
		}
	},
	beforeRouteLeave(to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		this.$destroy(true)
		next()
	},
	mounted() {
		// this.getCashHistory()
		this.switchTitle(1)
	},
	methods: {
        formatDate(date) {
			return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
		},
        onConfirmDate(date) {
			const [start, end] = date;
			this.chosedDate = `${this.formatDate(start)}至${this.formatDate(end)}`
			this.beginTime = `${this.formatDate(start)}`
			this.endTime = `${this.formatDate(end)}`
			this.dateSelect = false
            if(this.chosingTitle === 1){
                this.bankHistory = []
                this.getCashHistory()
            }else if(this.chosingTitle === 2){
                 this.virtualHistory = []
                this.getVirtualHistory()
            }
            
		},
        customSearch(){
            this.dateSelect = true
        },
		getCashHistory(){
            this.isLoading = true
            let params = {
                startDate:this.beginTime,
                endDate:this.endTime,
                // orderBy:'addTime',
                pageNumber:this.pageNumber,
                pageSize:this.pageSize
            }
			this.ServerAPI.postAPI(this.API.cashOutHistory,params,(success,data)=>{
                this.isLoading = false
				if (success){
					if(data.code === '0000'){
                        if(data.data.content.length === 0){
                            this.canLoad = this.loadAll = false
                            this.noData = true
                        }else{
                            this.noData = false
                            if(data.data.content.length < 10){
                                this.loadAll = true
                                this.canLoad = false
                            }else{
                                this.canLoad = true
                                this.loadAll = false
                            }
                            this.bankHistory = this.bankHistory.concat(data.data.content)
                        }
					}
				}
			})
		},
        loadMoreBank(){
            this.pageNumber ++
            this.getCashHistory()
        },
		getVirtualHistory(){
            this.isLoading = true
            let params = {
                startDate:this.beginTime,
                endDate:this.endTime,
                pageNumber:this.pageNumber,
                pageSize:this.pageSize
            }
			this.ServerAPI.postAPI(this.API.virtualOutHistory,params,(success,data)=>{
                this.isLoading = false
				if (success){
					if(data.code === '0000'){
                        if(data.data.content.length === 0){
                            this.canLoad2 = this.loadAll2 = false
                            this.noData = true
                        }else{
                            this.noData = false
                            if(data.data.content.length < 10){
                                this.loadAll2 = true
                                this.canLoad2 = false
                            }else{
                                this.canLoad2 = true
                                this.loadAll2 = false
                            }
                            this.virtualHistory = this.virtualHistory.concat(data.data.content)
                        }
					}
				}
			})
		},
        loadMoreVirtual(){
            this.pageNumber ++
            this.getVirtualHistory()
        },
        getCommissionHistory() {
            this.isLoading = true
            let params = {
                startDate:this.beginTime,
                endDate:this.endTime,
                pageNumber:this.pageNumber,
                pageSize:this.pageSize
            }
			this.ServerAPI.postAPI(this.API.cashoutRebatelist,params,(success,data)=>{
                this.isLoading = false
				if (success){
					if(data.code === '0000'){
                        if(data.data.content.length === 0){
                            this.canLoad3 = this.loadAll3 = false
                            this.noData = true
                        }else{
                            this.noData = false
                            if(data.data.content.length < 10){
                                this.loadAll3 = true
                                this.canLoad3 = false
                            }else{
                                this.canLoad3 = true
                                this.loadAll3 = false
                            }
                            this.commissionHistory = this.commissionHistory.concat(data.data.content)
                            this.commissionHistory.forEach(ele => {
                                let timeData = new Date(ele.addTime)
                                ele.addTimeShow = timeData.toLocaleDateString().replace(/\//g, "-")
                            });
                            // let dateShow = new Date(this.bankHistory[value].addTime)
                            // dateShow = dateShow.toLocaleDateString().replace(/\//g, "-")
                        }
					}
				}
			})
        },
        loadMoreCommission() {
            this.pageNumber ++
            this.getVirtualHistory()
        },
		switchTitle(value){
			if(this.chosingTitle !== value){
				this.chosingTitle = value
                this.pageNumber = 1
				if(this.chosingTitle === 1){
					this.getCashHistory()
                    this.bankHistory = []
                    this.loadAll = this.canLoad = false
				}else if(this.chosingTitle === 2){
					this.getVirtualHistory()
                    this.virtualHistory = []
                    this.loadAll2 = this.canLoad2 = false
				}else if(this.chosingTitle === 3){
					this.getCommissionHistory()
                    this.commissionHistory = []
                    this.loadAll3 = this.canLoad3 = false
				}
			}
		},
		toWithdrawDetail(value){
			if(this.chosingTitle === 1){
				sessionStorage.setItem('orderId',this.bankHistory[value].orderId)
				sessionStorage.setItem('bankInfo',this.bankHistory[value].bankInfo)
				sessionStorage.setItem('cash',this.bankHistory[value].cash)
				sessionStorage.setItem('failInfo',this.bankHistory[value].failInfo)
                if(this.bankHistory[value].status === 0){
                    sessionStorage.setItem('status','待审核')
                }else if(this.bankHistory[value].status === 1){
                    sessionStorage.setItem('status','待确认')
                }else if(this.bankHistory[value].status === 2){
                    sessionStorage.setItem('status','确认通过')
                }else if(this.bankHistory[value].status === 4){
                    sessionStorage.setItem('status','已关闭')
                }else if(this.bankHistory[value].status === 9){
                    sessionStorage.setItem('status','完成')
                }else if(this.bankHistory[value].status === -1){
                    sessionStorage.setItem('status','审核拒绝')
                }else if(this.bankHistory[value].status === -2){
                    sessionStorage.setItem('status','确认拒绝')
                }
                let dateShow = new Date(this.bankHistory[value].addTime)
                dateShow = dateShow.toLocaleDateString().replace(/\//g, "-")
                sessionStorage.setItem('addTime',dateShow)
				this.$router.push('/withdrawDetail')
			}else if(this.chosingTitle === 2){
				sessionStorage.setItem('orderId',this.virtualHistory[value].orderId)
				sessionStorage.setItem('virtualCard',this.virtualHistory[value].virtualCard)
				sessionStorage.setItem('cash',this.virtualHistory[value].cash)
				sessionStorage.setItem('info',this.virtualHistory[value].info)
				sessionStorage.setItem('virtualType',this.virtualHistory[value].virtualType)
                if(this.virtualHistory[value].status === 0){
                    sessionStorage.setItem('status','待审核')
                }else if(this.virtualHistory[value].status === 1){
                    sessionStorage.setItem('status','待确认')
                }else if(this.virtualHistory[value].status === 2){
                    sessionStorage.setItem('status','确认通过')
                }else if(this.virtualHistory[value].status === 4){
                    sessionStorage.setItem('status','已关闭')
                }else if(this.virtualHistory[value].status === 9){
                    sessionStorage.setItem('status','完成')
                }else if(this.virtualHistory[value].status === -1){
                    sessionStorage.setItem('status','审核拒绝')
                }else if(this.virtualHistory[value].status === -2){
                    sessionStorage.setItem('status','确认拒绝')
                }
                let dateShow2 = new Date(this.virtualHistory[value].addTime)
                dateShow2 = dateShow2.toLocaleDateString().replace(/\//g, "-")
                sessionStorage.setItem('addTime',dateShow2)
                if(this.virtualHistory[value].confirmTime === null){
                    sessionStorage.setItem('confirmTime','null')
                }else{
                    let dateShowCfm = new Date(this.virtualHistory[value].confirmTime)
                    dateShowCfm = dateShowCfm.toLocaleDateString().replace(/\//g, "-")
                    sessionStorage.setItem('confirmTime',dateShowCfm)
                }
				this.$router.push('/virtualWithdrawDetail')
			}
		},
		
		
	}
}
</script>
<style lang="scss" scoped>
.extractHistory {
    .history-title {
        width: 100%;
        height: 1rem;
        font-family: PingFang-SC-Medium;
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.3);
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .left-icon {
            width: .2rem;
            height: .32rem;
            margin-left: .2rem;
        }
        .right-blank {
            width: .2rem;
            height: .32rem;
            margin-left: .2rem;
        }
        .title-fonts {
            color: #2A2929;
            font-size: .3rem;
            font-weight: bold;
        }
        .right-fonts {
            position: absolute;
            font-size: .2rem;
            right: .2rem;
        }
    }
	.extract-content-title {
		display: flex;
		// justify-content: space-between;
		justify-content: center;
		align-items: center;
		width: 96%;
		margin: .3rem auto 0;
		text-align: center;
		.extract-content-title-list {
			width: 30%;
			color: rgb(114,114,114);
			height: .6rem;
		}
		.title-chosing {
			font-weight: bold;
			color: rgb(0, 71, 157);
			border-bottom: rgb(0, 71, 157) 5px solid;
		}
	}
	.gray-line {
		height: 1px;
		background: rgb(160,160,160);
	}
	.lowerLevel-content-show {
		padding: 0 .08rem;
		text-align: center;
		margin-top: .2rem;
		.lowerLevel-content-show-title {
			height: .8rem;
			background: rgb(220,220,220);
			border-radius: .5rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			div {
				width: 50%;
				color: rgb(44,44,44);
				font-size: .28rem;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
			}
            .w28-title {
                width: 28%;
            }
            .w44-title {
                width: 44%;
            }
		}
		.lowerLevel-content-show-content {
			.lowerLevel-content-show-content-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				border-bottom: rgb(220,220,220) 1px solid;
				div {
					width: 100%;
					height: .8rem;
					line-height: .8rem;
					color: rgb(75,75,75);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
				.lowerLevel-content-show-content-icon {
					position: absolute;
					height: .2rem;
					right: .3rem;
				}
                .w28 {
                    width: 28%;
                }
                .w44 {
                    width: 44%;
                }
			}
			.load-more {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #9C9C9C;
				margin: .15rem 0 .2rem;
				.load-more-icon {
					height: .15rem;
					margin-left: .15rem;
				}
			}
		}
        .noData-box {
            margin-top: 1rem;
            color: #727272;
            font-size: .3rem;
            .no-data-img {
                display: block;
                margin: 0 auto;
                width: 50%;
            }
            .no-data-fonts {
                margin-top: .5rem;
            }
        }
	}
}
</style>
